<template>
  <div class="profile-container">
    <div class="header">
      <h1>工作流编辑器</h1>
    </div>
    <VueFlow
      v-model="elements"
      :default-zoom="1"
      :min-zoom="0.1"
      :max-zoom="4"
      class="flow-container"
    >
      <Background variant="dots" gap="20" size="1" :color="'#666'" />
      <Controls />
      <MiniMap />
    </VueFlow>
  </div>
</template>

<script>
import { VueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

export default {
  name: 'Profile',
  components: {
    VueFlow,
    Background,
    Controls,
    MiniMap
  },
  data() {
    return {
      elements: [
        {
          id: '1',
          type: 'input',
          label: '开始节点',
          position: { x: 100, y: 100 },
        },
        {
          id: '2',
          type: 'default',
          label: '处理节点',
          position: { x: 300, y: 100 },
        },
        {
          id: '3',
          type: 'output',
          label: '结束节点',
          position: { x: 500, y: 100 },
        },
        { id: 'e1-2', source: '1', target: '2', label: '流程' },
        { id: 'e2-3', source: '2', target: '3', label: '结果' },
      ]
    }
  }
};
</script>

<style scoped>
.profile-container {
  height: calc(100% - 55px);
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  backdrop-filter: blur(10px);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.header {
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;
}

.header h1 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.flow-container {
  flex: 1;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
